// components/avatar-selector/avatar-selector.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 组件标题
    title: {
      type: String,
      value: '我的形象'
    },
    // 脸部素材列表
    faceList: {
      type: Array,
      value: []
    },
    // 是否正在加载脸部素材
    faceMaterialsLoading: {
      type: Boolean,
      value: false
    },
    // 当前选中的脸部素材ID
    selectedFace: {
      type: String,
      value: null
    },
    // 自定义上传的脸部图片
    customFaceImage: {
      type: String,
      value: null
    },
    // 自定义脸部图片缩略图
    customFaceThumbnail: {
      type: String,
      value: null
    },
    // 选中的脸部素材图片URL
    selectedFaceImage: {
      type: String,
      value: null
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    showModal: false // 控制弹窗显示
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 显示选择弹窗
     */
    showModal() {
      console.log('👤 显示形象选择弹窗');
      // 只触发显示弹窗事件，弹窗由父页面控制
      this.triggerEvent('modalshow');
    },

    /**
     * 隐藏选择弹窗
     */
    hideModal() {
      console.log('👤 隐藏形象选择弹窗');
      // 只触发隐藏弹窗事件，弹窗由父页面控制
      this.triggerEvent('modalhide');
    },

    /**
     * 阻止事件冒泡
     */
    stopPropagation() {
      // 空方法，用于阻止事件冒泡
    },

    /**
     * 选择脸部素材
     */
    selectFaceMaterial(e) {
      const item = e.currentTarget.dataset.item;
      if (!item) {
        console.error('脸部素材数据为空');
        return;
      }

      console.log('👤 选择脸部素材:', {
        id: item.id,
        name: item.name,
        imageUrl: item.imageUrl,
        thumbnailUrl: item.thumbnailUrl
      });

      // 触发选择事件，传递选中的素材数据
      this.triggerEvent('select', {
        item: item
      });

      // 触发隐藏弹窗事件
      this.triggerEvent('modalhide');

      wx.showToast({
        title: `已选择：${item.name}`,
        icon: 'success',
        duration: 1500
      });

      console.log('✅ 脸部素材选择完成');
    },

    /**
     * 上传自定义脸部照片
     */
    uploadFaceImage() {
      console.log('📤 开始上传自定义人脸照片');

      // 触发上传事件，让父组件处理上传逻辑
      this.triggerEvent('upload');
    }
  },

  /**
   * 组件生命周期
   */
  lifetimes: {
    attached() {
      console.log('👤 头像选择器组件已加载');
    },

    detached() {
      console.log('👤 头像选择器组件已卸载');
    }
  },

  /**
   * 组件所在页面的生命周期
   */
  pageLifetimes: {
    show() {
      // 页面显示时的逻辑
    },

    hide() {
      // 页面隐藏时的逻辑
      // 如果弹窗是打开的，则关闭它
      if (this.data.showModal) {
        this.hideModal();
      }
    }
  }
});
